<template>
  <div>
    <a-modal
      v-model:visible="visible1"
      width="1200px"
      title-align="start"
      @close="handleClose"
    >
      <template #title> 提交流程 </template>
      <div>
        <!-- <a-space style="margin-top: 10px">
          <a-button type="dashed">提交</a-button
          <a-button type="dashed">流程跟踪</a-button>F
          <a-button type="dashed">关注工作</a-button>
          <a-button type="dashed">返回</a-button>
        </a-space> -->
        <a-form :model="form" :layout="layout" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="密级">
                <a-select
                  v-model="form.section"
                  placeholder="Please select ..."
                  allow-clear
                >
                  <a-option value="1">公开</a-option>
                  <a-option value="2">普通商密</a-option>
                  <a-option value="3">内部</a-option>
                  <a-option value="4">核心商密</a-option>
                  <a-option value="5">秘密</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="name" label="加工内容编码">
                <span>111</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="加工内容名称">
                <span>111</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="name" label="一级品类">
                <span>111</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="二级品类">
                <span>111</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="name" label="三级品类">
                <span>111</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="name" label="加工内容描述">
                <a-textarea placeholder="Please enter something" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="name" label="备注">
                <a-textarea placeholder="Please enter something" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';

  const layout = ref('vetical');
  const form = reactive({
    section: '请选择',
    name: '11',
    post: '',
    isRead: false,
  });

  const rules = {
    name: [
      {
        required: true,
        message: 'name is required',
      },
    ],
  };

  const emit = defineEmits(['close']);
  const visible1 = ref(true);

  const handleClose = () => {
    emit('close');
  };
</script>
